<!DOCTYPE html>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>Rust + HTMX TodoList</title>  
    <!-- 引入 HTMX -->  
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>  
    <!-- 引入 Tailwind CSS 用于快速美化 -->  
    <script src="https://cdn.tailwindcss.com"></script>  
</head>  
<body class="bg-gray-200 min-h-screen flex justify-center items-start pt-10">  
    <div class="w-full max-w-md bg-white rounded-lg shadow-xl p-6">  
        <h1 class="text-2xl font-bold mb-4 text-center text-gray-800">Rust Todo List</h1>  
  
        <!-- 添加 Todo 的表单 -->  
        <!-- hx-post: 提交到后端 -->  
        <!-- hx-target: 将返回的 HTML 插入到 #todo-list -->  
        <!-- hx-swap: 插在列表的末尾 (beforeend) -->  
        <!-- hx-on::after-request: 提交后清空输入框 -->  
        <form hx-post="/todos"   
              hx-target="#todo-list"   
              hx-swap="beforeend"   
              hx-on::after-request="this.reset()"  
              class="flex gap-2 mb-6">  
            <input type="text" name="title" placeholder="要做什么？" required  
                   class="flex-1 border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-500">  
            <button type="submit"   
                    class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">  
                添加  
            </button>  
        </form>  
  
        <!-- Todo 列表容器 -->  
        <ul id="todo-list">  
            {% for todo in todos %}  
                <!-- 复用 todo.html 片段 -->  
                {% include "todo.html" %}  
            {% endfor %}  
        </ul>  
    </div>  
</body>  
</html>  
